<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css"
        />
        <style>
            html,
            body {
                position: relative;
                margin: 0;
                height: 100%;
            }

            .info {
                padding: 6px 8px;
                font: 14px/16px Arial, Helvetica, sans-serif;
                background: white;
                background: rgba(255, 255, 255, 0.8);
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
                border-radius: 5px;
            }

            .info h4 {
                margin: 0 0 5px;
                color: #777;
            }

            .legend {
                text-align: left;
                line-height: 18px;
                color: #555;
            }

            .legend i {
                width: 18px;
                height: 18px;
                float: left;
                margin-right: 8px;
                opacity: 0.7;
            }
        </style>
    </head>
    <body>
        <div id="map" style="height: 100%;"></div>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"
            charset="utf-8"
        ></script>
        <script src="https://unpkg.com/three@0.117.1/build/three.min.js" charset="utf-8"></script>
        <script src="./build/example_choropleth.bundle.js" charset="utf-8"></script>
    </body>
</html>
